<template>
  <div>
    <Category :scene="scene"></Category>
    <el-card style="margin: 10px 0">
      <div v-show="scene == 0">
        <el-button
          type="primary"
          icon="Plus"
          :disabled="categoryStore.c3Id ? false : true"
          @click="addSpu"
          v-has="`btn.Spu.add`"
        >
          添加spu
        </el-button>
        <el-table border style="margin: 10px 0" :data="records">
          <el-table-column
            type="index"
            align="center"
            prop="prop"
            label="序号"
            width="100px"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="spuName"
            label="SPU名称"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="description"
            label="SPU描述"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="prop"
            label="操作"
            width="300px"
          >
            <template #="{ row }">
              <el-button
                size="simall"
                type="primary"
                icon="Plus"
                title="添加SKU"
                @click="addSku(row)"
                v-has="`btn.Spu.addsku`"
              ></el-button>
              <el-button
                size="simall"
                type="primary"
                icon="Edit"
                title="修改SPU"
                @click="updateSpu(row)"
                v-has="`btn.Spu.update`"
              ></el-button>
              <el-button
                size="simall"
                type="primary"
                icon="View"
                title="查看SKU"
                @click="findSku(row)"
                v-has="`btn.Spu.skus`"
              ></el-button>

              <el-popconfirm
                class="box-item"
                :title="`确定要删除${row.spuName}么?`"
                placement="top-start"
                @confirm="removeSpu(row)"
                @cancel="cancel"
              >
                <template #reference>
                  <el-button
                    size="simall"
                    type="primary"
                    icon="Delete"
                    title="删除SPU"
                    v-has="`btn.Spu.delete`"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChange"
          @current-change="getHasSpu"
          v-model:current-page="pageInfo.pageNo"
          v-model:page-size="pageInfo.limit"
          :page-sizes="[3, 5, 7, 9, 11]"
          :background="true"
          :pager-count="5"
          layout="  prev, pager, next, jumper,->,sizes,total,"
          :total="pageInfo.total"
        />
      </div>
      <!-- 添加和修改spu组件 -->
      <SpuForm
        ref="refSpuForm"
        v-show="scene == 1"
        @changeScene="changeScene"
      ></SpuForm>
      <!-- 添加sku组件 -->
      <SkuForm
        ref="refSkuForm"
        v-show="scene == 2"
        @changeScene="changeScene"
      ></SkuForm>
      <!-- dialog对话框展示已有的sku数据 -->
      <el-dialog v-model="show" title="SKU列表">
        <el-table :data="skuArr" style="width: 100%">
          <el-table-column prop="skuName" label="SKU名字"></el-table-column>
          <el-table-column prop="price" label="SKU价格"></el-table-column>
          <el-table-column prop="weight" label="SKU重量"></el-table-column>
          <el-table-column prop="prop" label="SKU图片">
            <template #="{ row }">
              <img
                :src="row.skuDefaultImg"
                alt="暂无图片"
                style="width: 100px; height: 100px"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, reactive, onBeforeUnmount } from 'vue'
import { reqHasSpu, reqRemoveSpu, reqSkuList } from '@/api/product/spu'
import type {
  HasSpuResponseData,
  Records,
  SpuData,
  SkuInfoData,
  SkuData,
} from '@/api/product/spu/type'
import useCategoryStore from '@/store/modules/category'
import SpuForm from './spuForm.vue'
import SkuForm from './skuForm.vue'
import { ElMessage } from 'element-plus'
let categoryStore = useCategoryStore()
//场景
let scene = ref(0) //显示已有的spu数据
//分页器数据
let pageInfo = reactive({
  pageNo: 1,
  limit: 3,
  total: 0,
})
let refSpuForm = ref<any>() //获取spu实例
let refSkuForm = ref<any>() //获取sku组件实例
let records = ref<Records>([])
//存储全部的sku数据
let skuArr = ref<SkuData[]>([])
let show = ref<boolean>(false)
//监视三级分类id,获取已有SPU全部数据
watch(
  () => categoryStore.c3Id,
  (newValue) => {
    //务必要有三级分类ID的时候再去发请求
    if (!newValue) {
      return
    }
    getHasSpu()
  },
)
//获取某有个三级分类下全部已有的SPU数据
const getHasSpu = async (page = 1) => {
  pageInfo.pageNo = page
  let result: HasSpuResponseData = await reqHasSpu(
    pageInfo.pageNo,
    pageInfo.limit,
    categoryStore.c3Id,
  )
  records.value = result.data.records
  pageInfo.total = result.data.total
}
//分页器 每页条数发生变化事件回调
const sizeChange = () => {
  getHasSpu()
}
//添加新的SPU按钮回调
const addSpu = () => {
  scene.value = 1
  refSpuForm.value.initAddSpuData(categoryStore.c3Id)
}
//修改已有的SPU按钮回调
const updateSpu = (row: SpuData) => {
  scene.value = 1
  refSpuForm.value.initHasSpuData(row)
}
//子组件通过自定义事件将场景scene改为0
const changeScene = (obj: any) => {
  //子组件通过changgeScene方法将场景改为0,展示已有的spu数据
  scene.value = obj.flag
  //更新场景后再次重新获取一下数据
  //若是更新数据情况 保留在当前页
  if (obj.hasOwnProperty('params')) {
    if (obj.params == 'update') {
      getHasSpu(pageInfo.pageNo)
    } else {
      //新添加数据 情况 恢复到第一页
      getHasSpu()
    }
  }
}
//添加sku事件会回调
const addSku = (row: any) => {
  scene.value = 2
  //调用子组件的方法初始化添加SKU数据
  refSkuForm.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row)
}
//查看SKU类表数据
const findSku = async (row: SpuData) => {
  let resault: SkuInfoData = await reqSkuList(row.id as number)

  if (resault.code == 200) {
    skuArr.value = resault.data
    //展示sku图片列表数据
    show.value = true
  }
}
//删除已有的SPU事件回调
const removeSpu = async (row: SpuData) => {
  let result: any = await reqRemoveSpu(row.id as number)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除SPU成功',
    })
    //获取剩余的已有的spu数据
    getHasSpu(records.value.length > 1 ? pageInfo.pageNo : pageInfo.pageNo - 1)
  } else {
    ElMessage({
      type: 'error',
      message: '删除SPU失败',
    })
  }
}
//取消删除操作
const cancel = () => {
  ElMessage({
    type: 'success',
    message: '取消删除操作',
  })
}
//路由组件销毁前,清空关于分类的数据
onBeforeUnmount(() => {
  categoryStore.$reset()
})
</script>

<style lang="scss" scoped>
.popconfirm-base-box {
  width: 600px;
}

.popconfirm-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popconfirm-base-box .center {
  justify-content: center;
}

.popconfirm-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}
</style>
